<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				display: inline-block;
				width: 30px;
				height: 30px;
				color: #000000;
				font-weight: bold;
				animation: Load 5s linear infinite alternate;
			}

			/* @keyframes Load{
				0% {transform: translateY(0);}
				50 {
					transform: translateY(20px);
				}
				80% {
					transform: translateY(50px);
				}
				100% {
					transform: translateY(0);
				}
			} */
			
			/* 1 */
			.div1{color: hotpink;
				font-weight: bold;
				animation: L 1s linear infinite alternate;=
			}
			
			@keyframes L{
				/* 0% {transform: translateY(0);} */
				50% {
					transform: translateY(10px);
				}
				100% {
					transform: translateY(5px);
				}
			}
			
			/* 2 */
			.div2{color: black;
				font-weight: bold;
				animation: O 1s linear infinite alternate;
			}
			
			@keyframes O{
				/* 0% {transform: translateY(0);} */
				50% {
					transform: translateY(5px);
				}
				100% {
					transform: translateY(10px);
				}
			}
			
			/* 3 */
			.div3{color: hotpink;
				font-weight: bold;
				animation: A 1s linear infinite alternate;=
			}
			
			@keyframes A{
				/* 0% {transform: translateY(0);} */
				50% {
					transform: translateY(10px);
				}
				100% {
					transform: translateY(5px);
				}
			}
			
			/* 4 */
			.div4{color: black;
				font-weight: bold;
				animation: D 1s linear infinite alternate;=
			}
			
			@keyframes D{
				/* 0% {transform: translateY(0);} */
				50% {
					transform: translateY(5px);
				}
				100% {
					transform: translateY(10px);
				}
			}
			/* 5 */
			.div5{color: hotpink;
				font-weight: bold;
				animation: I 1s linear infinite alternate;=
			}
			
			@keyframes I{
				/* 0% {transform: translateY(0);} */
				50% {
					transform: translateY(10px);
				}
				100% {
					transform: translateY(5px);
				}
			}
			
			/* 6 */
			.div6{color: black;
				font-weight: bold;
				animation: I 1s linear infinite alternate;=
			}
			
			@keyframes I{
				/* 0% {transform: translateY(0);} */
				50% {
					transform: translateY(5px);
				}
				100% {
					transform: translateY(10px);
				}
			}
			
			/* 7 */
			.div7{color: hotpink;
				font-weight: bold;
				animation: G 1s linear infinite alternate;
			}
			
			@keyframes G{
				/* 0% {transform: translateY(0);} */
				50% {
					transform: translateY(10px);
				}
				100% {
					transform: translateY(5px);
				}
			}
		</style>
	</head>
	<body>
			<div class="div1">L</div>
			<div class="div2">O</div>
			<div class="div3">A</div>
			<div class="div4">D</div>
			<div class="div5">I</div>
			<div class="div6">N</div>
			<div class="div7">G</div>
	</body>
</html>
